<template>
    <div class="tabbar">
        <router-link tag="div" to="/home" class="tabbar-icons ">
            <span class="iconfont icon--home"></span>
            <span>首页</span>
        </router-link>

        <router-link tag="div" to="/member" class="tabbar-icons">
            <span class="iconfont icon--followers"></span>
            <span>会员</span>
        </router-link>
        <router-link tag="div" to="/shopcart" class="tabbar-icons">
           <span class="shopspan">
                <span class="badge">{{$store.getters.goodscount}}</span>
                <span class="iconfont icon-Shoppingcart"></span>
           </span>
            <span>购物车</span>
        </router-link>
        <router-link tag="div" to="/search" class="tabbar-icons">
            <span class="iconfont icon--search"></span>
            <span>搜索</span>
        </router-link>
    </div>
</template>

<script>
    export default {
        name: "tabbar"
    }
</script>

<style scoped lang="scss">
    @import "../assets/sassstyle";
   .active {
       color: $theme-color;
   }
.tabbar{
    position:fixed;
    background-color: white;
    bottom: 0;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #7f7f7f;
    color: #333333;

    .tabbar-icons{
        display: flex;
        flex-direction: column;
        text-align: center;
        span{
            font-size: 14px;
        }
        .shopspan{
            .badge{
                display: inline-block;
                width: 18px;
                height: 18px;
                background-color: red;
                border-radius: 50%;
                color: #FFFFFF;
                font-size: 10px;
                line-height: 18px;
                text-align: center;
            }
        }

        .iconfont{
            font-size: 18px;
            margin-top: 4px;
        }
        p{
            margin: 0;
            font-size: 14px;
        }
    }
}

</style>
